import "./theme.scss";
import { Modal } from "antd";
import config from '../../config'
import { CheckCircleFilled } from '@ant-design/icons'
import { useSelector, useDispatch } from "react-redux";
import { setColorPrimary} from '../../store/slices/theme'
function ThemeModal({onClose}) {

  const dispatch = useDispatch();
  const theme = useSelector((state) => state.theme);

  return (
      <Modal
        title="主题色"
        open={true}
        onCancel={onClose}
        footer={null}
      >
        <div className="P-theme">
            {
                config.customColorPrimarys && config.customColorPrimarys.map((item, index) => {
                    return (
                        <div className="item" key={index} style={{backgroundColor: item}} onClick={
                            ()=>{
                                dispatch(setColorPrimary(item));
                            }
                        }>
                            {
                                theme.colorPrimary === item &&
                                <CheckCircleFilled style={{color: "#ffffff"}}></CheckCircleFilled>
                            }
                        </div>
                    )
                })
            }
        </div>
      </Modal>
  );
}

export default ThemeModal;
